<template>
  <div>
    <el-row>
    <div class="paint" style="margin-top: 10px;text-align: center">
      <el-button
        plain type="primary"  round style="font-size: 20px;width: 150px;height: 60px;margin-right: 10px; float:left;margin-left: 5%;margin-top: 35px"
        @click="getList1()"
      >空闲技师
      </el-button>
      <el-button
        plain type="primary"  round style="font-size: 20px;width: 150px;height: 60px;margin-right: 10px; float:left;margin-top: 35px"
        @click="getList2()"
      >上钟技师
      </el-button>
      <el-button
        plain type="primary"  round style="font-size: 20px;width: 150px;height: 60px;margin-right: 10px; float:left;margin-top: 35px"
        @click="getList()"
      >全部技师
      </el-button>
      <el-button
        plain type="primary"  round style="font-size: 20px;width: 150px;height: 60px;margin-right: 80px;float: right ;margin-top: 35px"
        @click="back()"
      >返回
      </el-button>


    </div></el-row>
    <el-row >
      <el-col v-for="(item,index) in baseinfoList" :key="index" :span="24" :offset="index%3===0?0:''">
        <el-card style="width: 90%;margin-left: 5%;margin-top: 35px; border-radius: 20px;" shadow="always">
          <!--            :class="cardClass(item.projectCategory)"     -->
          <div style="display: flex; flex-direction: column;">
            <div style="display: flex;font-size: 40px">
              <el-row style="width: 100%">
                <el-col :span="3">
                  <div style="display: flex;  flex-direction: row; padding-right: 20px;">
                    <img src="~@/assets/icons/imageicon/34.png" style="height: 80%;width:80%">
                  </div>
                </el-col>
                <el-col :span="21">
                  <div style="display: flex; justify-content: space-between; align-items: center;"> <!-- 将手牌号、位置和录单员工放在同一行 -->
                    <div style="margin-top: 20px;">用户昵称:{{ item.nickName }}</div>
                    <div style="margin-top: 20px;">用户账号:{{ item.userName }}</div>
                  </div>
                  <div style="display: flex; justify-content: space-between; align-items: center;"> <!-- 剩余两个项目，并列显示 -->

                    <div style="display: flex; align-items: center;"> <!-- 将 div 和 dict-tag 放在同一个容器中并水平对齐 -->
                      <div>性别:</div>
                      <dict-tag :options="dict.type.sys_user_sex" :value="item.sex"/>
                    </div>

                    <div style="display: flex; align-items: center;"> <!-- 将 div 和 dict-tag 放在同一个容器中并水平对齐 -->
                      <div>人员状态:</div><dict-tag :options="dict.type.yqg_personnel_status" :value="item.personnelStatus"/>
                    </div>


                  </div>

                </el-col>

              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="paint" style="margin-top: 35px;text-align: center">
    </div>
  </div>
</template>
<script>
import {
  listBaseinfo,
  listBaseinfo1,
  listBaseinfo2,
} from "@/api/module/yzx/baseinfo";
export default {
  name: "jishizt",
  dicts: ['yqg_personnel_status', 'sys_user_sex', 'yqg_post', 'yqg_department'],
  data() {
    return {
      // 总条数
      zt: null,
      total: 0,
      // 人员基础信息表格数据
      baseinfoList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        nickName: null,
        userName: null,
        idNumber: null,
        sex: null,
        phone: null,
        post: null,
        department: null,
        personnelStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    back() {
      this.$router.push({path: "/jishi/jingliindex"});
    },
    /** 查询人员基础信息列表 */
    getList() {
      this.loading = true;
      listBaseinfo(this.queryParams).then(response => {
        this.baseinfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      this.zt=0;
    },
    getList1() {
      this.loading = true;
      listBaseinfo1(this.queryParams).then(response => {
        this.baseinfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      this.zt=1;
    },
    getList2() {
      this.loading = true;
      listBaseinfo2(this.queryParams).then(response => {
        this.baseinfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      this.zt=2;
    },
  }
};
</script>

